import { InputNumber } from 'antd';
import React from 'react';
import OStyle from './index.less';
import { HeaderTitleProps } from './interface';

const HeaderTitle: React.FC<HeaderTitleProps> = (props) => {
  const { score, onChangeScore, scoreLength, scoreTypeName } = props;
  return (
    <div className={OStyle.cus_header}>
      <p className={OStyle.header_title}>{scoreTypeName}</p>
      <div className={OStyle.header_input}>
        <div className={OStyle.input_box}>
          <label className={OStyle.input_box_label_required}>每题分数</label>
          <InputNumber
            value={score}
            min={1}
            size="small"
            style={{ width: '100px' }}
            onClick={(e: React.MouseEvent) => {
              e.stopPropagation();
            }}
            onFocus={(e: React.FocusEvent) => {
              e.stopPropagation();
            }}
            onChange={(value) => {
              onChangeScore(value);
            }}
          />
        </div>
        <p className={OStyle.row_number}>
          小计：<span className={OStyle.number_bold}>{scoreLength}</span>题&nbsp;&nbsp;总分：
          <span className={OStyle.number_bold}>{(score || 0) * scoreLength}</span>分
        </p>
      </div>
    </div>
  );
};

export default HeaderTitle;
